<template>
  <el-affix v-if="!isLogin" :offset="-290">
    <div class="homePageBGC">
      <div class="titleDiv">
        <span class="title">{{ title }}</span>
        <span class="cursor"></span>
      </div>
    </div>
  </el-affix>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, onMounted } from 'vue'
const { isLogin } = defineProps(['isLogin'])
const isLoginFlag = computed(() => isLogin)

let strArr = ref<string>(' 一个人如果抱着义务的意识去读书，便不了解读书的艺术。')
let title = ref<string>('')

//监听页面加载完成事件
document.addEventListener('DOMContentLoaded', function () {
  let i = 0
  setTimeout(() => {
    const timer = setInterval(() => {
      if (i >= strArr.value.length - 1) clearInterval(timer)
      title.value = title.value + strArr.value.charAt(i)
      i++
    }, 250)
  }, 500)
})
</script>
<style lang="scss" scoped>
$fontSize: 34;
$fontColor: #323334;
.titleDiv {
  -webkit-box-reflect: below 1px linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  margin-top: -40px;
  align-items: flex-end;
  text-align: center;
}
.title {
  color: $fontColor;
  font-size: #{$fontSize}px;
  font-weight: 700;
  letter-spacing: 8px;
  text-align: center;
  outline: none;
  --c: rgb(141, 161, 160);
  text-shadow: 0 0 10px var(--c), 0 0 20px var(--c), 0 0 40px var(--c), 0 0 80px var(--c), 0 0 160px var(--c);
  animation: animate 5s linear infinite;
  user-select: none; //文字不可选择
}
.cursor {
  vertical-align: bottom; // 底部对齐
  margin-left: -1px;
  display: inline-block;
  width: #{$fontSize - 5}px;
  height: 3px;
  background-color: $fontColor;
  animation: blink 1s infinite;
  user-select: none; //文字不可选择
}
@keyframes animate {
  to {
    filter: hue-rotate(360deg);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
</style>
<style>
.homePageBGC {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
  background-image: url(../../assets/homePageBGC.webp);
  background-size: 100%;
  background-position: 0% 60%;
}
</style>
